<template>
    <div>
        <headers />

        <div class="container">
            <main-nav />
            <el-card>
                <filters @update:cid="handleCidUpdate" />
            </el-card>
            <div class="mt-20 mb-20">
                <el-row :gutter="30">
                    <el-col :span="17">
                        <el-card>
                            <div>
                                <el-button :type="params.is_hot === 1 ? 'danger' : 'default'"
                                    @click="handleChangeHot(params.is_hot === 1 ? 0 : 1)">
                                    热门
                                </el-button>

                                <el-button v-for="(item, index) in orderBy" :key="index"
                                    :type="index === orderByIndex ? 'danger' : 'default'"
                                    @click="handleOrderBy(item.field, item.val, index);">{{
                                    item.label }}
                                    <i class="el-icon-sort" v-if="item.val > 1"></i>
                                </el-button>
                            </div>
                            <div v-loading="loading">
                                <div class="product-list">
                                    <product-item v-for="item in goodsList" :key="item.id" :item="item" />
                                </div>
                                <el-empty v-if="isEmpty" description="暂无装备"></el-empty>
                                <div class="text-center mt-20">
                                    <el-pagination @current-change="handleCurrentChange" :current-page="params.page"
                                        :page-size="params.pagesize" :page-sizes="[10, 20, 30, 40]"
                                        layout="total, prev, pager, next" :total="total" hide-on-single-page>
                                    </el-pagination>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="7">
                        <el-card>
                            <div slot="header">
                                <svg class="mr-10" aria-hidden="true" style="width: 30px; height: 30px;">
                                    <use xlink:href="#icon-a-zu105"></use>
                                </svg>
                                <img src="../../assets/img/106.png">
                            </div>
                            <div class="recommends">
                                <div class="recommend-item" v-for="item in recommendList" :key="item.id">
                                    <div class="recommend-image">
                                        <el-image :src="item.thumb" fit="cover" lazy></el-image>
                                        <div class="recommend-view-count">
                                            <span>
                                                <svg class="mr-10" aria-hidden="true"
                                                    style="width: 20px; height: 20px;">
                                                    <use xlink:href="#icon-liulan"></use>
                                                </svg>{{ item.view }}</span>
                                            <span class="count">{{ item.slides_num }}张</span>
                                        </div>
                                    </div>
                                    <div class="recommend-title">{{ item.title }}</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
        <footers />
        <comparison />
    </div>
</template>

<script>
import headers from "@/components/header.vue"
import footers from "@/components/footer.vue"
import mainNav from "@/components/mainNav.vue"
import comparison from "@/components/comparison.vue"
import filters from "./components/filters.vue"
import productItem from "./components/productItem.vue"

import {  getGoodsList, getJingXuanGoods } from "@/api/apis"

export default {
    name: "Procucts",
    components: {
        headers,
        footers,
        mainNav,
        comparison,
        filters,
        productItem
    },
    data () {
        return {
            orderByIndex: null,
            orderBy: [
                {
                    val: 1,
                    field: 'fieldby',
                    label: '时间'
                },
                {
                    val: 2,
                    field: 'fieldby',
                    label: '价格'
                },
                {
                    val: 3,
                    field: 'fieldby',
                    label: '浏览量'
                },
                {
                    val: 4,
                    field: 'fieldby',
                    label: '销量'
                }
            ],
            loading: true,
            total: 0,
            isEmpty: false,
            params: {
                cid: '',
                page: 1,
                pagesize: 12,
                lastPage: 1, // 最后一页
                is_hot: 0, // 1热门
                fieldby: '', // 1时间2价格3浏览量4销量
                sort: '', // 1大到小2小到大
            },
            
            recommendList: [],
            goodsList: [],
        }
    },
    mounted () {
        const cid = this.$route.query.cid;
        if (cid){
            this.params.cid = cid;
        }
        this.getGoodsListData();
        this.getJingXuan();
    },
    methods: {
        // 得到子组件通知 更新cid
        handleCidUpdate (newCid) {
            // 当子组件触发 update:cid 事件时，更新父组件的 cid
            this.params.cid = newCid
            // 然后可以基于新的 cid 重新请求列表页接口
            this.getGoodsListData()
        },
        // 排序：热门
        handleChangeHot(val){
            this.params.is_hot = val;
            this.getGoodsListData()
        },
        // 排序：时间、价格、浏览量、销量
        handleOrderBy (field, val, index) {
            if (this.params[field] == val){
                this.params[field] = ''
                this.orderByIndex = null;
            } else {
                this.params[field] = val;
                this.orderByIndex = index
            }
            
            this.getGoodsListData()
        },
        handleSizeChange (val) {
            console.log(`每页 ${val} 条`)
        },
        handleCurrentChange (val) {
            this.params.page = val
            this.getGoodsListData()
        },
        //  获取商品列表
        getGoodsListData(){
            let that = this;
            that.loading = true;
            getGoodsList({
                ...that.params
            }).then((res) => {
                if (res.code === 1) {
                    that.goodsList = res.data.data;
                    that.params.pagesize = Number(res.data.per_page);
                    that.params.lastPage = res.data.last_page;
                    that.total = res.data.total;
                    that.isEmpty = !that.goodsList.length;
                }
                that.loading = false;
            })
        },
        // 获取精选推荐
        getJingXuan(){
            let that = this;
            getJingXuanGoods().then((res) => {
                if (res.code === 1) {
                    that.recommendList = res.data;
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.product-list {
    /* display: grid;
    grid-template-columns: repeat(4, 1fr); */
    display: flex;
    flex-wrap: wrap;
    grid-gap: 15px;
    padding-top: 30px;
}

.recommends {
    .recommend-item {
        text-align: center;

        &:not(:last-child) {
            margin-bottom: 60px;
        }

        &:hover {
            /deep/.el-image {
                img {
                    transform: scale(1.1);
                }
            }
        }
        .recommend-image {
            position: relative;
            /deep/.el-image {
                width: 100%;
                height: 315px;
                border-radius: 4px;
                display: block;
                img {
                    transition: transform .3s linear;
                }
            }
            .recommend-view-count {
                position: absolute;
                bottom: 0;
                left: 0;
                width: calc(100% - 20px);
                height: 40px;
                background: rgba(0, 0, 0, .5);
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
                svg {
                    fill: #fff;
                    vertical-align: bottom;
                }
                span {
                    display: inline-block;
                    margin-right: 10px;
                }
            }
        }
        .recommend-title {
            margin-top: 10px;
            color: #2E3033;
            font-size: 16px;
        }
    }
}
</style>